<template>
	<view class="page_body">
		<view style="width:750rpx;height: 520rpx;">
				<image class=""
					src="/static/newpic/getCouponCenter.svg"
					style="width: 100%;height: 100%;"></image>
			</view>
		<!-- 导航栏 -->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子导航栏 -->
		<view class=""
			:style="{'height': hieght}">
		</view>
		<navBar bgColor="RGBA(0,0,0,0)">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">领劵中心</text>
		</navBar>

		<!-- 优惠卷列表 -->
		<scroll-view scroll-y=""
		:style="{'height': 'calc(100vh  - ' + top +')'}"
			@scrolltolower="scrolltolower">

			<view style="width:750rpx;height: 520rpx;">
				<image class=""
					src="/static/newpic/getCouponCenter.svg"
					style="width: 100%;height: 100%;"></image>
			</view>
			<view class="bottom" style="">
				<view class="time">
					限时领劵
				</view>
				<view class="content"
					v-for="(item,index) in orderList"
					:key="index">
					<view style="width:355px; height: 100px;">
						<image class=""
							src="/static/newpic/couponList.svg"
							style="width: 100%;height: 100%;"></image>
						<!-- <image class=""  src="/static/newpic/usedCoupon.svg" style="width: 100%;height: 100%;"></image> -->
					</view>
					<view class="list">
						<view class="content_left">
							<text style="font-size: 28rpx;">￥</text>
							<text style="font-size: 60rpx;font-weight: 800;">{{item.faceMoney}}</text>
						</view>
						<view class="content_right">
							<view class="content_title">
								<view class="content_title1">{{item.name}}</view>
								<view class="content_title2">
									{{ item.overdueType == 1 ? Utils.DateFormateTime(item.overdueDate,'nyr') : item.overdueTime}}前可用
								</view>
								<view class="content_title3">
									<u-line-progress :percentage="(item.receiveQty / item.issueQty) * 100"
										activeColor="#ff0000"
										:showText="false"
										inactiveColor="#ffbfbf"
										width="8">

									</u-line-progress>
									<text
										style="font-size: 20rpx; color: #999999;">已抢{{(item.receiveQty / item.issueQty) * 100}}%</text>
								</view>
							</view>
							<view class="content_use"
								@click="toUse">
								领取
							</view>

						</view>
					</view>
				</view>
				<view class="content">
					<view style="width:355px; height: 100px;">
						<image class=""
							src="/static/newpic/couponList.svg"
							style="width: 100%;height: 100%;"></image>
						<!-- <image class=""  src="/static/newpic/usedCoupon.svg" style="width: 100%;height: 100%;"></image> -->
					</view>
					<view class="list">
						<view class="content_left">
							<text style="font-size: 28rpx;">￥</text>
							<text style="font-size: 60rpx;font-weight: 800;">800</text>
						</view>
						<view class="content_right">
							<view class="content_title">
								<view class="content_title1">满100减10</view>
								<view class="content_title2">
									2023-11-15前可用
								</view>
								<view class="content_title3">
									<u-line-progress :percentage="80"
										activeColor="#ff0000"
										:showText="false"
										inactiveColor="#ffbfbf"
										width="8">

									</u-line-progress>
									<text style="font-size: 20rpx; color: #999999;">已抢80%</text>
								</view>
							</view>
							<view class="content_use"
								@click="toUse">
								领取
							</view>

						</view>
					</view>
				</view>
				<view class="content">
					<view style="width:355px; height: 100px;">
						<image class=""
							src="/static/newpic/couponList.svg"
							style="width: 100%;height: 100%;"></image>
						<!-- <image class=""  src="/static/newpic/usedCoupon.svg" style="width: 100%;height: 100%;"></image> -->
					</view>
					<view class="list">
						<view class="content_left">
							<text style="font-size: 28rpx;">￥</text>
							<text style="font-size: 60rpx;font-weight: 800;">800</text>
						</view>
						<view class="content_right">
							<view class="content_title">
								<view class="content_title1">满100减10</view>
								<view class="content_title2">
									2023-11-15前可用
								</view>
								<view class="content_title3">
									<u-line-progress :percentage="80"
										activeColor="#ff0000"
										:showText="false"
										inactiveColor="#ffbfbf"
										width="8">
				
									</u-line-progress>
									<text style="font-size: 20rpx; color: #999999;">已抢80%</text>
								</view>
							</view>
							<view class="content_use"
								@click="toUse">
								领取
							</view>
				
						</view>
					</view>
				</view>
				<view class="content">
					<view style="width:355px; height: 100px;">
						<image class=""
							src="/static/newpic/couponList.svg"
							style="width: 100%;height: 100%;"></image>
						<!-- <image class=""  src="/static/newpic/usedCoupon.svg" style="width: 100%;height: 100%;"></image> -->
					</view>
					<view class="list">
						<view class="content_left">
							<text style="font-size: 28rpx;">￥</text>
							<text style="font-size: 60rpx;font-weight: 800;">800</text>
						</view>
						<view class="content_right">
							<view class="content_title">
								<view class="content_title1">满100减10</view>
								<view class="content_title2">
									2023-11-15前可用
								</view>
								<view class="content_title3">
									<u-line-progress :percentage="80"
										activeColor="#ff0000"
										:showText="false"
										inactiveColor="#ffbfbf"
										width="8">
				
									</u-line-progress>
									<text style="font-size: 20rpx; color: #999999;">已抢80%</text>
								</view>
							</view>
							<view class="content_use"
								@click="toUse">
								领取
							</view>
				
						</view>
					</view>
				</view>
			</view>


		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getCouponActivity
	} from '@/api/global.js'
	export default {
		computed: {
			...mapGetters(['top']),
		},
		data() {
			return {
				current: 0,
				statusBarHeight: '',
				hieght: '',
				list1: [{
					name: '全部',
				}, {
					name: '待使用',
				}, {
					name: '已使用'
				}, {
					name: '已失效'
				}],
				pageData: {
					currentPage: 1,
					pageSize: 10
				},
				searchParams: {
					sort: 1,
					mark: 1
				},
				lastPage: 0,
				orderList: [],
			}
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度

			})
			this.getList()
		},
		methods: {
			//获取列表
			async getList() {
				uni.showLoading()
				let res = await getCouponActivity({
					...this.searchParams,
					...this.pageData
				})
				if (res.code == 2000) {
					uni.hideLoading()
					if (this.pageData.currentPage == 1) {
						this.orderList = (res?.data?.info?.list || [])
					} else {
						this.orderList = this.orderList.concat(res?.data?.info?.list || [])
					}
					this.orderList = this.orderList.map(item => {
						return {
							...item,
							overdueTime: this.Utils.addDate(item.overdueDay)
						}
					})
					this.lastPage = res?.data?.info?.lastPage
					console.log(this.orderList, '优惠卷列表');
				}
			},
			// 去使用
			toUse() {
				uni.navigateTo({
					url: `/page_public/publicClass?title=${item.name}&type=${item.type}&tag=${item.tag}`
				})
			},

			//返回上个页面
			navToBack() {
				uni.switchTab({
					url: '/pages/myde/myde'
				})
			},
			//下拉加载
			scrolltolower() {
				if (this.pageData.currentPage > this.lastPage) {
					return
				} else {
					// 获取单据列表
					this.pageData.currentPage++
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	.time {
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
		color: #333333;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.content {
		padding: 20rpx;
		margin-top: 14rpx;
		position: relative;

		.list {
			width: 710rpx;
			height: 200rpx;
			display: flex;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;

			.content_left {
				width: 200rpx;
				text-align: center;
				line-height: 192rpx;
				font-size: 60rpx;
				margin: 20rpx;
				color: #fff
			}

			.content_right {
				display: flex;

				.content_title {
					width: 170px;
					margin: 30rpx 0 30rpx 10rpx;

					.content_title1 {
						font-size: 30rpx;
						color: #333333;
						margin-top: 20rpx;
						font-weight: 700;
						width: 340rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.content_title2 {
						font-size: 24rpx;
						color: #808080;
						margin-top: 20rpx;
						width: 310rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.content_title3 {
						font-size: 20rpx;
						color: #808080;
						margin-top: 20rpx;
						width: 200rpx;
					}
				}

				.content_use {
					width: 108rpx;
					height: 48rpx;
					background-color: #fb575c;
					border-radius: 48rpx;
					color: #fff;
					margin-top: 100rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 48rpx;
				}

				.content_nouse {
					width: 108rpx;
					height: 48rpx;
					background-color: rgba(242, 242, 242, 1);
					border-radius: 48rpx;
					color: #808080;
					margin-top: 100rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 48rpx
				}
			}

		}
	}
	.bottom{
		height: calc(100% - 520rpx);
	}
</style>